<template>
  <div>
    <el-dialog
      :title="obj.isadd ? '角色添加' : '角色编辑'"
      :visible.sync="obj.istrue"
      width="40%"
    >
      <span>
        <el-form ref="form" :model="form" label-width="80px">
          <el-form-item label="角色名称">
            <el-input v-model="form.rolename"></el-input>
          </el-form-item>
          <el-form label="角色权限">
            <el-tree
              :data="menulist"
              show-checkbox
              node-key="id"
              default-expand-all
              ref="tree"
              :props="{ children: 'children', label: 'title' }"
              highlight-current
            >
            </el-tree>
          </el-form>
          <el-form-item label="状态">
            <el-switch
              v-model="form.status"
              :active-value="1"
              :inactive-value="2"
            ></el-switch>
          </el-form-item>
        </el-form>
      </span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="cancel">取 消</el-button>
        <el-button type="primary" @click="submit" v-if="obj.isadd">确 定</el-button>
        <el-button type="primary" @click="edit" v-else>修改</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { mapActions, mapGetters } from "vuex";
import { roleadd, roleinfo, roleedit} from "../../../requset/api";
import { successAlert, warningAlert } from "../../../util/alert.js";
export default {
  props: ["obj"],
  data() {
    return {
      form: {
        rolename: "",
        menes: "",
        status: 1,
      },
    };
  },
  computed: {
    ...mapGetters({
      rolelist: "role/list",
      menulist: "menu/list",
    }),
  },
  methods: {
    ...mapActions({
      reqChangeRole: "role/reqChangeRole",
      reqChangeMenu: "menu/reqChangeMenu",
    }),
    emty() {
      this.form = {
        rolename: "",
        menus: "",
        status: 1,
      };
      this.$refs.tree.setCheckedNodes([]);
    },
    cancel() {
      this.obj.istrue = false;
      this.obj.isadd = true;
      this.emty();
    },
    submit() {
      this.form.menus = JSON.stringify(this.$refs.tree.getCheckedKeys());
      roleadd(this.form).then((res) => {
        if (res.data.code == 200) {
          successAlert(res.data.msg);
          this.cancel();
          this.reqChangeRole();
        } else {
          warningAlert(res.data.msg);
        }
      });
    },
    getone(id) {
      roleinfo({ id: id }).then((res) => {
        this.form = {
          ...res.data.list,
          menus: JSON.parse(res.data.list.menus),
        };
        this.$refs.tree.setCheckedKeys(this.form.menus);
        this.form.id = id;
      });
    },
    edit() {
      this.form.menus = JSON.stringify(this.$refs.tree.getCheckedKeys());
      roleedit(this.form).then((res) => {
        if (res.data.code == 200) {
          successAlert(res.data.msg);
          this.cancel();
          this.reqChangeRole();
        } else {
          warningAlert(res.data.msg);
        }
      });
    },
  },
  mounted() {
    this.reqChangeMenu();
  },
};
</script>

<style lang="scss" scoped>
</style>